<!-- @include ./inc/header.html -->

<header class="g-header custom-header">
  <div class="g-title">
    <h3>定制流程</h3>
    <span>custom process</span>
  </div>
</header>
<main class="main">
  <div class="custom-main">
    <img class="wimg" src="/@@/images/m/process_main.jpg" alt="">
    <div id="steps">
      {{each steps}}<span class="step step{{$index + 1}}" data-tit="{{$value.tit}}" data-summ="{{$value.text}}">&nbsp;</span>
      {{/each}}
    </div>
  </div>
  <div>
    <img class="wimg" src="/@@/images/m/process_bg.jpg" alt="">
  </div>
</main>

<div class="aside-step" id="aside-step">
  <div class="aside-step-con" id="aside-step-con"></div>
</div>

<!-- @include ./inc/footer.html -->
<script>
$(function() {
  $('.step').on('click', stepEvent.call(this))
})

function stepEvent() {
  var i = -1
  var $side = $('#aside-step'), $con = $('#aside-step-con')
  return function() {
    var $this = $(this)
    var index = $this.index(), data = $this.data()
    var content = '<h3 class="title">' + data.tit + '</h3><div class="summary">' + data.summ + '</div>'
    if ($side.hasClass('is-active')) {
      if (i === index) {
        $con.html('')
        $side.removeClass('is-active')
      } else {
        $con.html(content)
      }
    } else {
      $con.html(content)
      $side.addClass('is-active')
    }
    i = index
  }
}
</script>
<!-- @include ./inc/end.html -->